<template>
  <a-cascader 
    v-model="districtId"
    :options="options" 
    :field-names="fieldNames"
    allow-clear />
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { getAll } from '@/api/baseinfo/district';
  import { toTree } from '@/utils';

  const props = defineProps({
    modelValue: {
      type: Number,
      default: undefined
    },
  });
  const districtId = ref(props.modelValue);

  const options = ref<Array<any>>([]);
  const fieldNames = {value: 'districtId', label: 'districtName'};

  watch(props, newp => {
    if(newp.modelValue!=districtId.value) {
      districtId.value = newp.modelValue;
    }
  });
  const emit = defineEmits(['update:modelValue']);
  watch(districtId, newv => {
    emit('update:modelValue', newv);
  });

  getAll().then(data=>{
    options.value = toTree(data, 'districtId');
  })
</script>
